<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="6">
        <div class="grid-content bg-purple" @click="allOrder">全部订单</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" @click="noPayOrder">未支付订单</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" @click="OverTimeOrder">评价订单</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" @click="finshOrder">已完成订单</div>
      </el-col>
    </el-row>

    <!-- 订单分页 组件 -->
    <div class="block" v-show="!comment">
      <el-pagination
        @size-change="handleOrderSizeChange"
        @current-change="handleOrderCurrentChange"
        :current-page="currentPage4"
        :page-size="5"
        layout="prev, pager, next"
        small
        :total="temptableData.length"
      ></el-pagination>
    </div>
    <el-table :data="tableData" style="width: 100%" v-show="!comment">
      <el-table-column label="订单信息" width="600px">
        <template slot-scope="scope">
          <div>
            <h3>订单号 {{scope.row.orderId}} 下单时间:{{scope.row.createTime}}</h3>
            <div v-for="item in scope.row.goodInfos" :key="item.goodName">
              <div class="goodInfo">
                <div>
                  <img :src="item.goodImgUrl" alt="图片缺失" class="goodImg" />
                  <div class="goodInforight">
                    <div>商品名称:{{item.goodName}}</div>
                    <div>商品信息:{{item.goodInfo}}</div>
                    <div>商品数量:{{item.goodCount}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="配送信息">
        <el-table-column prop="userName" label="收货人" width="120"></el-table-column>

        <el-table-column prop="userAddress" label="收货地址" width="120"></el-table-column>
        <el-table-column prop="userPhone" label="收货电话" width="120"></el-table-column>
      </el-table-column>
      <el-table-column prop="total" label="总价" width="120"></el-table-column>
      <el-table-column prop="status" label="订单状态" width="120">
        <template slot-scope="scope">{{getStatus(scope.row.status)}}</template>
      </el-table-column>

      <el-table-column prop="status" label="支付方式" width="120">
        <template slot-scope="scope">{{getPayType(scope.row.payType)}}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div v-show="scope.row.status==0">
            <el-button type="primary" @click="payOrder(scope.row)">支付订单</el-button>
            <el-button type="primary" @click="alipayOrder(scope.row)">支付宝支付</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="comment" v-for="item in userComment" :key="item.commentId" v-show="comment">
      <div class="commentGoodInfo">
        <h3>商品信息</h3>
        <img :src="item.goodImgUrl" />
      </div>
      <div class="comment-right">
        <h3>{{item.goodName}}</h3>
        <p>{{item.goodInfo}}</p>
        <el-rate v-model="item.star" v-show="item.isComment==1" disabled></el-rate>
        <h3 v-show="item.isComment==1">评论信息:{{item.commentContent}}</h3>

        <el-button @click="commentopen(item.commentId)" v-show="item.isComment==0">评价</el-button>
      </div>
    </div>

    <el-dialog title="评价商品" :visible.sync="dialogVisible" width="30%">
      <el-form :model="commentInfo" :rules="rules" ref="commentForm">
        <el-form-item label="星级" prop="star">
          <el-rate v-model="commentInfo.star"></el-rate>
        </el-form-item>

        <el-form-item label="具体内容" prop="commentContent">
          <el-input type="textarea" v-model="commentInfo.commentContent" placeholder="请输入评级信息"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commentGood">评价</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getuserOrder,
  payOrder,
  aiPayOrder,
  getUserComment,
  addGoodComment,
} from "../api/requestapi";
export default {
  name: "Order",

  data() {
    return {
      tableData: [],
      temptableData: [],

      //当前页的大小
      currentPage4: 0,
      //页面大小
      pageSize: 5,

      //用评价信息
      userComment: [],
      comment: false,

      //显示评价商品
      dialogVisible: false,

      // 评论信息
      commentInfo: {
        commentId: "",
        commentContent: "",
        star: "",
      },

      //表单规则:
      //验证规则
      rules: {
        star: [{ required: true, message: "评分不能为空", trigger: "blur" }],
        commentContent: [
          { required: true, message: "评论不能为空", trigger: "blur" },
          {
            min: 10,
            max: 50,
            message: "长度在 10 到 50 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    //初始化订单
    init() {
      getuserOrder().then((response) => {
        this.temptableData = response.data;
        //计算页面大小
        var start = (this.currentPage4 - 1) * this.pageSize;
        // 渲染表格
        this.tableData = this.temptableData.slice(
          start,
          this.temptableData.length
        );
      });
    },

    //分页订单(假分页 页大小变化)
    handleOrderSizeChange(val) {
      //计算页面大小
      var start = (this.currentPage4 - 1) * val;
      // 渲染表格
      this.tableData = this.temptableData.slice(
        start,
        this.temptableData.length
      );
    },
    // 分页订单（假分页  ）
    handleOrderCurrentChange(val) {
      console.log("分页大小:" + val);

      //计算页面大小
      var start = (val - 1) * this.pageSize;
      var end = val * this.pageSize;
      // 渲染表格
      this.tableData = this.temptableData.slice(start, end);
    },

    //获取订单状态
    getStatus(status) {
      switch (status) {
        case 1:
          return "已完成";
        case 0:
          return "未支付";
        case -1:
          return "已过期";
      }
    },

    //获取支付方式
    getPayType(type) {
      switch (type) {
        case 1:
          return "普通支付";
        case 2:
          return "支付宝沙箱支付";
        case 0:
          return "无";
      }
    },

    //切换为未支付订单
    noPayOrder() {
      this.tableData = [];

      for (var item of this.temptableData) {
        if (item.status === 0) {
          this.tableData.push(item);
        }
      }
      console.log(this.tableData);
      this.comment = false;
    },

    //切换评价订单
    OverTimeOrder() {
      getUserComment().then((res) => {
        this.userComment = res.data;
        this.comment = true;
        console.log(res.data);
      });
    },

    //打开评分页面
    commentopen(id) {
      this.commentInfo.commentId = id;
      this.dialogVisible = true;
    },

    //评价商品
    commentGood() {
      //检查表单
      this.$refs["commentForm"].validate((valid) => {
        if (valid) {
          //添加评论
          addGoodComment(this.commentInfo).then(() => {});
        } else {
          return;
        }
      });
    },

    //切换为已完成订单
    finshOrder() {
      this.tableData = [];

      for (var item of this.temptableData) {
        if (item.status === 1) {
          this.tableData.push(item);
        }
      }
      this.comment = false;
    },

    //切换为全部订单
    allOrder() {
      this.tableData = this.temptableData;
      this.comment = false;
    },

    //支付订单
    payOrder(row) {
      var params = new URLSearchParams();

      var goodId = [];

      for (var info of row.goodInfos) {
        goodId.push(info.goodId);
      }
      console.log(goodId);

      params.append("orderId", row.orderId);
      params.append("goodId", goodId);

      payOrder(params).then((response) => {
        this.init();
      });
    },

    //支付宝支付订单
    alipayOrder(row) {
      // var params = new URLSearchParams();

      // params.append("out_trade_no", row.orderId);
      // params.append("subject", "测试订单");
      // params.append("total_amount", row.total);

      var params = {
        out_trade_no: "",
        subject: "",
        total_amount: "",
        goodId: [],
      };

      var goodId = [];

      for (var info of row.goodInfos) {
        params.goodId.push(info.goodId);
      }
      params.out_trade_no = row.orderId;
      params.subject = "测试订单";
      params.total_amount = row.total;
      console.log(goodId);

      // params.append("goodId", goodId);

      aiPayOrder(params).then((response) => {
        //生成支付网页
        document.querySelector("body").innerHTML = response;
        const div = document.createElement("div");
        div.innerHTML = response;
        document.body.appendChild(div);
        document.forms[0].setAttribute("target", "_blank"); // 打开新窗口页面
        document.forms[0].submit();
      });
    },
  },

  created() {
    this.init();
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.goodImg {
  width: 300px;
  height: 250px;
  left: 30px;
}
.goodInfo {
  margin-bottom: 10px;
  top: 50px;
}
.goodInforight {
  float: right;
  margin-top: 30px;
  margin-right: 20px;
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
}

/* 清除浮动 在浮动后面加一个元素 让后面的布局可以顶住下面继续编辑*/
.clearfix:after {
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  /* 触发 hasLayout */
  zoom: 1;
}

.comment {
  height: 300px;
  width: 500px;
  border: #99a9bf 1px;
  border: solid;
  float: left;
  margin-right: 40px;
}

.comment img {
  width: 200px;
  height: 200px;
}
.commentGoodInfo {
  width: 200px;
  height: 300px;
  font-size: 18px;
  padding: 0;
  margin: 0;
  float: left;
}
.comment-right {
  float: right;
  width: 200px;
}
</style>